/**
 * 画布中绘制矩形
 * 参数: cav-画布对象  list-矩形数组 i-选中矩形下标
 **/
import axios from 'axios'
import Vue from 'vue'
import { get, post, del, put } from '../api/modelapi.js'
import store from '../store/index.js';


/* 操作执行方法分发 */
export function draw(cav, list, i,isDrawing) {
   //console.info(isDrawing+'-*-*-*')
   // 画布初始化
   let ctx = cav.getContext('2d');
   ctx.strokeStyle = '#295CFF';
   ctx.lineWidth = 2;

   // 变量初始化
   let sX = 0; // 鼠标X坐标
   let sY = 0; // 鼠标Y坐标

   /*
    *鼠标移动进行第一层判断, 区分情况: 无矩形, 已有矩形无选中, 已有选中矩形
    */
   cav.onmousemove = function (em) {
       sX = em.offsetX;
       sY = em.offsetY;
       let iem = undefined; // 鼠标移动时临时存储当前鼠标所在矩形的下标

       if (list.length === 0) { // **** 无矩形 ****
           // 绘制新矩形
           newDraw(cav, ctx, list,isDrawing);
       } else if (i === undefined) { // **** 已有矩形无选中 ****
           // 判断鼠标位置
           list.forEach(function (value, index, array) {
               if (value.w > 0 && value.h > 0 && sX > value.x && sX < value.x + value.w && sY > value.y && sY < value.y + value.h) {
                   // 鼠标在右下方向生成的矩形中
                   iem = index;
                   judgeDraw(cav, ctx, list, iem);
               }
               if (value.w < 0 && value.h > 0 && sX < value.x && sX > value.x + value.w && sY > value.y && sY < value.y + value.h) {
                   // 鼠标在左下方向生成的矩形中
                   iem = index;
                   judgeDraw(cav, ctx, list, iem);
               }
               if (value.w > 0 && value.h < 0 && sX > value.x && sX < value.x + value.w && sY < value.y && sY > value.y + value.h) {
                   // 鼠标在右上方向生成的矩形中
                   iem = index;
                   judgeDraw(cav, ctx, list, iem);
               }
               if (value.w < 0 && value.h < 0 && sX < value.x && sX > value.x + value.w && sY < value.y && sY > value.y + value.h) {
                   // 鼠标在左上方向生成的矩形中
                   iem = index;
                   judgeDraw(cav, ctx, list, iem);
               }
               if (iem === undefined) {
                   // 鼠标不在矩形中
                   newDraw(cav, ctx, list,isDrawing);
               }
           })
       } else { // **** 已有选中矩形 ****
           // 判断鼠标位置
           for (let index = 0; index < list.length; index++) {
               let value = list[index];
               if (sX < value.x + 5 && sX > value.x - 5 && sY < value.y + 5 && sY > value.y - 5) {
                   // ***  鼠标在起点角  ***
                   if (index === i) {
                       changeDraw(cav, ctx, list, i, 1);
                       break;
                   }
               } else if (sX < value.x + value.w + 5 && sX > value.x + value.w - 5 && sY < value.y + 5 && sY > value.y - 5) {
                   // ***  鼠标在起点横向角  ***
                   if (index === i) {
                       changeDraw(cav, ctx, list, i, 2);
                       break;
                   }

               } else if (sX < value.x + 5 && sX > value.x - 5 && sY < value.y + value.h + 5 && sY > value.y + value.h - 5) {
                   // ***  鼠标在起点纵向角  ***
                   if (index === i) {
                       changeDraw(cav, ctx, list, i, 3);
                       break;
                   }

               } else if (sX < value.x + value.w + 5 && sX > value.x + value.w - 5 && sY < value.y + value.h + 5 && sY > value.y + value.h - 5) {
                   // ***  鼠标在终点角  ***
                   if (index === i) {
                       changeDraw(cav, ctx, list, i, 4);
                       break;
                   }

               } else if (value.w > 0 && value.h > 0 && sX > value.x && sX < value.x + value.w && sY > value.y && sY < value.y + value.h) {
                   // ***  鼠标在右下方向生成的矩形中  ***
                   iem = index
                   judgeDraw(cav, ctx, list, index);
                   break;

               } else if (value.w < 0 && value.h > 0 && sX < value.x && sX > value.x + value.w && sY > value.y && sY < value.y + value.h) {
                   // ***  鼠标在左下方向生成的矩形中  ***
                   iem = index
                   judgeDraw(cav, ctx, list, index);
                   break;

               } else if (value.w > 0 && value.h < 0 && sX > value.x && sX < value.x + value.w && sY < value.y && sY > value.y + value.h) {
                   // ***  鼠标在右上方向生成的矩形中  ***
                   iem = index
                   judgeDraw(cav, ctx, list, index);
                   break;

               } else if (value.w < 0 && value.h < 0 && sX < value.x && sX > value.x + value.w && sY < value.y && sY > value.y + value.h) {
                   // ***  鼠标在左上方向生成的矩形中  ***
                   iem = index
                   judgeDraw(cav, ctx, list, index);
                   break;

               } else {
                   if (iem === undefined) {
                       // *** 鼠标不在矩形中 ***
                       newDraw(cav, ctx, list,isDrawing);
                   }
               }
           }
       }

       /* 鼠标移出画布区域时保存选中矩形下标(如有) */
       cav.onmouseout = function (eo) {
           if (i !== undefined) {
               // 初始化
               draw(cav, list, i);
           }
       };
   }
};

/* 编辑矩形四个角 */
/* 编辑矩形四个角 */
function changeDraw(cav, ctx, list, i, site) {
   cav.style.cursor = 'pointer';

   // site: 操作矩形角的位置, 1-起点 2-起点横向 3-起点纵向 4-终点
   let mark = list[i];

   /* 按下鼠标左键 */
   cav.onmousedown = function (ed) {
       // 保存鼠标落下位置的X, Y坐标
       let sX = ed.offsetX; // 起点X坐标
       let sY = ed.offsetY; // 起点Y坐标

       /* 移动鼠标 */
       cav.onmousemove = function (em) {
           // 计算绘制数据
           let iframe = {};
           switch (site) {
               case 1:
                   iframe = {
                       x: em.offsetX,
                       y: em.offsetY,
                       w: mark.w - (em.offsetX - sX),
                       h: mark.h - (em.offsetY - sY),
                       id: mark.id,
                       areaType:mark.areaType,
                       templateImageid:mark.templateImageid,
                       templatePointType: mark.templatePointType,
                       templateId: mark.templateId,
                       options: mark.options,
                   };
                   break;
               case 2:
                   iframe = {
                       x: mark.x,
                       y: mark.y + (em.offsetY - sY),
                       w: mark.w + (em.offsetX - sX),
                       h: mark.h - (em.offsetY - sY),
                       id: mark.id,
                       areaType:mark.areaType,
                       templateImageid:mark.templateImageid,
                       templatePointType: mark.templatePointType,
                       templateId: mark.templateId,
                       options: mark.options,
                   };
                   break;
               case 3:
                   iframe = {
                       x: mark.x + (em.offsetX - sX),
                       y: mark.y,
                       w: mark.w - (em.offsetX - sX),
                       h: mark.h + (em.offsetY - sY),
                       id: mark.id,
                       areaType:mark.areaType,
                       templateImageid:mark.templateImageid,
                       templatePointType: mark.templatePointType,
                       templateId: mark.templateId,
                       options: mark.options,
                   };
                   break;
               case 4:
                   iframe = {
                       x: mark.x,
                       y: mark.y,
                       w: mark.w + (em.offsetX - sX),
                       h: mark.h + (em.offsetY - sY),
                       id: mark.id,
                       areaType:mark.areaType,
                       templateImageid:mark.templateImageid,
                       templatePointType: mark.templatePointType,
                       templateId: mark.templateId,
                       options: mark.options,
                   };
                   break;
           }
           list.splice(i, 1, iframe);

           // 重新绘制
           reDraw(cav, ctx, list, i);
       };

       /* 鼠标抬起 */
       cav.onmouseup = function () {
           // 重新绘制
           reDraw(cav, ctx, list, i);

           // 调用接口更新矩形信息
        //    updateRectangle(list[i], (newRectangle) => {
        //        // 用新对象替换 list[i]
        //        list.splice(i, 1, newRectangle);
           
        //        // 重新绘制画布
        //        // reDraw(cav, ctx, list);
           
        //        // 如果需要将更新后的 list 同步到 Vue 页面，可以调用 Vue 的方法
        //        // this.updateList(list); // 假设 updateList 是 Vue 组件中更新 list 的方法
        //    });

           // 初始化
           draw(cav, list, i);
       };

       /* 鼠标离开矩形区 */
       cav.onmouseout = function () {
           // 重新绘制
           reDraw(cav, ctx, list);
           // 初始化
           draw(cav, list);
       };

       /* 监听键盘, 点击后可以控制删除 */
       delDraw(cav, ctx, list, i);
   };
}

/* 绘制新矩形 */
function newDraw(cav, ctx, list, isDrawing) {
   if (isDrawing) {
     cav.style.cursor = 'crosshair';
   } else {
     cav.style.cursor = 'default';
   }
 
   store.dispatch('updateCircleselectionstatus', 0);
   let start = false; // 画框状态
   let sX = 0; // 起点X坐标
   let sY = 0; // 起点Y坐标
 
   cav.onmousedown = function (ed) {
     store.dispatch('updateCircleselectionstatus', 1);
     if (isDrawing) {
       start = true;
       sX = ed.offsetX;
       sY = ed.offsetY;
     }
 
     cav.onmousemove = function (em) {
       store.dispatch('updateCircleselectionstatus', 1);
       if (start) {
         reDraw(cav, ctx, list);
         ctx.beginPath();
         ctx.setLineDash([8, 4]);
         ctx.rect(sX, sY, em.offsetX - sX, em.offsetY - sY);
         ctx.stroke();
       }
     };
 
     cav.onmouseup = function (eu) {
       store.dispatch('updateCircleselectionstatus', 2);
       if (start && Math.abs(eu.offsetX - sX) > 10 && Math.abs(eu.offsetY - sY) > 10) {
           let frame = {
               x: sX,
               y: sY,
               w: eu.offsetX - sX,
               h: eu.offsetY - sY,
           };
           list.push(frame);
           reDraw(cav, ctx, list);
           start = false;
       
           // Get cropped image
        //    cropImage(cav, ctx, list[list.length - 1]).then(croppedImage => {
        //         if (croppedImage) {
        //             console.info('croppedImage', croppedImage);
        //             console.info('croppedImage base64', croppedImage.base64);
        //             console.info('croppedImage file', croppedImage.file);
        //         }
        //     }).catch(error => {
        //         console.error('Error getting cropped image:', error);
        //     });
        //    const croppedImage = cropImage(cav, ctx, list[list.length - 1]);
        //    if (croppedImage) {
        //        console.info('croppedImage',croppedImage)
        //     //    console.info('croppedImage',croppedImage.base64)
        //    }
       } else {
         reDraw(cav, ctx, list);
         start = false;
       }
     }.bind(this); // 绑定 this，以便访问 Vue 实例
 
     cav.onmouseout = function (eo) {
       store.dispatch('updateCircleselectionstatus', 2);
       if (start && Math.abs(eo.offsetX - sX) > 10 && Math.abs(eo.offsetY - sY) > 10) {
         let frame = {
           x: sX,
           y: sY,
           w: eo.offsetX - sX,
           h: eo.offsetY - sY,
         };
         list.push(frame);
         reDraw(cav, ctx, list);
         start = false;
 
         // 裁剪图片
        //  cropImage(cav, ctx, list[list.length - 1]);
 
         // 绘制完成后，切换到取消圈选状态
         this.drawingStatus = 'cancel';
         this.isDrawing = false;
       } else {
         reDraw(cav, ctx, list);
         start = false;
       }
     }.bind(this); // 绑定 this，以便访问 Vue 实例
   };
 }

/* 选中矩形, 重绘矩形, 并分发后续事件 */
function judgeDraw(cav, ctx, list, iem) {
   cav.style.cursor = 'default'
   // 初始化变量
   let sX = 0; // 起点X坐标
   let sY = 0; // 起点Y坐标

   /* 按下鼠标左键 */
   cav.onmousedown = function (ed) {
       
       sX = ed.offsetX;
       sY = ed.offsetY;
       // 更改选中状态, 重绘矩形
       reDraw(cav, ctx, list, iem);
       /* 当仅点击选中矩形便抬起鼠标后, 重新初始化画布 */
       cav.onmouseup = function () {
           // 重绘矩形
           reDraw(cav, ctx, list, iem);
           // 初始化
           draw(cav, list, iem);

       };
       
       /* 按住拖动鼠标, 移动选中矩形*/
       moveDraw(cav, ctx, list, iem, sX, sY);

       /* 监听键盘, 点击后可以控制删除, 由于移动矩形事件已经监听了onmousemove, 所以在移动矩形方法中仍有一次调用 */
       delDraw(cav, ctx, list, iem);

       //获取点击得iem 以及鼠标事件
       const customEvent = new CustomEvent('customMouseDown', {detail:{event:event,item:iem}});
       document.dispatchEvent(customEvent);
   }

};
/* 移动矩形 */
/* 移动矩形 */
function moveDraw(cav, ctx, list, i, sX, sY) {
   cav.style.cursor = 'pointer';
   let mark = list[i];

   cav.onmousemove = function (em) {
       let iframe = {
           x: mark.x + (em.offsetX - sX),
           y: mark.y + (em.offsetY - sY),
           w: mark.w,
           h: mark.h,
           id: mark.id,
           areaType:mark.areaType,
           templateImageid:mark.templateImageid,
           templatePointType: mark.templatePointType,
           templateId: mark.templateId,
           options: mark.options,
       };
       list.splice(i, 1, iframe);

       // 重新绘制
       reDraw(cav, ctx, list, i);
   };

   cav.onmouseup = function () {
       // 重新绘制
       reDraw(cav, ctx, list, i);

       // 调用接口更新矩形信息
    //    updateRectangle(list[i], (newRectangle) => {
    //        // 用新对象替换 list[i]
    //        list.splice(i, 1, newRectangle);
       
    //        // 重新绘制画布
    //        // reDraw(cav, ctx, list);
       
    //        // 如果需要将更新后的 list 同步到 Vue 页面，可以调用 Vue 的方法
    //        // this.updateList(list); // 假设 updateList 是 Vue 组件中更新 list 的方法
    //    });

       // 初始化
       draw(cav, list, i);
   };
};
/* 删除矩形 */
function delDraw(cav, ctx, list, i) {
   cav.style.cursor = 'pointer'
   /* 按键事件 */
   if (i === null) {
       // i为null时阻止按键监听事件冒泡
       cav.onkeydown = function (k) {
           return false;
       }
   } else {
       // 监听按键事件
       cav.onkeydown = function (k) {
           let key = k.keyCode || k.which;
           if (key == 8 && i !== null) {
               if (list.length >= 1) {
                   // 删除数组元素
                   list.splice(i, 1);
                   // 重绘矩形
                   reDraw(cav, ctx, list);
               } else {
                   /* 矩形数组长度为0, 已将矩形框全部删除 */
                   ctx.clearRect(0, 0, cav.width, cav.height);
               }
               // 重置监听状态, 防止删除完毕后, 按键监听不消失
               delDraw(cav, ctx, list, null)
               // 重绘矩形
               reDraw(cav, ctx, list);
               // 初始化
               draw(cav, list);
           }
       }
   }
};

/* 重绘所有矩形 */
function reDraw(cav, ctx, list, i) {
   //console.info('array',list)
   cav.style.cursor = 'pointer'
   ctx.setLineDash([8, 0]); // 设置边框为实线
   ctx.clearRect(0, 0, cav.width, cav.height);
   // 绘制未选中部分
   list.forEach(function (value, index, array) {
       if (i === undefined || index != i) {
           ctx.beginPath();
           ctx.strokeStyle = '#295CFF';
           ctx.rect(value.x, value.y, value.w, value.h);
           ctx.stroke();
           // 绘制子矩形
           // //console.info(value.options.length)
            if (value.options && value.options.length > 0) {
                   // //console.info(value.options.length);
                   value.options.forEach(option => {
                       ctx.beginPath();
                       ctx.rect(option.x, option.y, option.w, option.h);
                       ctx.stroke();
                   });
               }
           // value.options.forEach(option => {
           // 	ctx.beginPath();
           // 	ctx.rect(option.x, option.y, option.w, option.h);
           // 	ctx.stroke();
           // });
           
           // 绘制编辑和删除按钮
           const buttonHeight = 24;
           const buttonWidth = 60;

           // 计算按钮位置 - 贴着矩形框底部，按钮之间无间隙
           const buttonsStartX = value.x + value.w - (buttonWidth * 2); // 去掉 buttonMargin
           const buttonsY = value.y + value.h;

           // 绘制删除按钮（左边）
           ctx.fillStyle = "#FF4D4F";
           ctx.fillRect(buttonsStartX, buttonsY, buttonWidth, buttonHeight);

           // 删除按钮文字
           ctx.fillStyle = "white";
           ctx.font = "14px Microsoft YaHei";
           ctx.textAlign = "center";
           ctx.textBaseline = "middle";
           ctx.fillText('删除', buttonsStartX + buttonWidth/2, buttonsY + buttonHeight/2);

           // 绘制编辑按钮（右边）- 直接相邻
           ctx.fillStyle = "#295CFF";
           ctx.fillRect(buttonsStartX + buttonWidth, buttonsY, buttonWidth, buttonHeight);

           // 编辑按钮文字
           ctx.fillStyle = "white";
           ctx.fillText('编辑', buttonsStartX + buttonWidth * 1.5, buttonsY + buttonHeight/2);
           
           // 新增题型显示 - 统一样式
           const typeButtonHeight = 24;
           const padding = 20; // 文字左右padding

           // 设置文字样式
           ctx.fillStyle = 'white';
           ctx.font = '14px Microsoft YaHei';
           ctx.textAlign = 'center';
           ctx.textBaseline = 'middle';

           // 根据templatePointType显示不同内容
           let typeText = '';
           switch(value.templatePointType) {
               case 1: 
                   typeText = '定位点';
                   break;
               case 2:
                   typeText = '文字定位点';
                   break;
               case 3:
                   typeText = '缺考标记';
                   break;
               case 4:
                   typeText = '条形码';
                   break;
               case 5:
                   typeText = '考号填涂';
                   break;
               case 6:
                   typeText = '客观题';
                   break;
               default:
                   typeText = '主观题';
           }

           // 添加题号
           let name = value.includedNumbers != undefined ? value.includedNumbers : '';
           const displayText = typeText + name;

           // 计算文字宽度并添加padding
           const textWidth = ctx.measureText(displayText).width;
           const typeButtonWidth = textWidth + (padding * 2); // 文字宽度加上左右padding

           // 绘制文字背景 - 贴着矩形框顶部
           ctx.fillStyle = '#295CFF';
           ctx.fillRect(value.x, value.y - typeButtonHeight, typeButtonWidth, typeButtonHeight);

           // 绘制文字 - 调整文字垂直位置，确保居中
           ctx.fillStyle = 'white';
           ctx.fillText(displayText, value.x + typeButtonWidth/2, value.y - typeButtonHeight/2);
       }
   });
   // 绘制已选中部分
   list.forEach(function (value, index, array) {
       //console.info('value',value)
       cav.style.cursor = 'pointer'
       // //console.info(value)
       if (index === i) {
           /* 绘制方框 */
           ctx.beginPath();
           ctx.strokeStyle = 'red';
           ctx.rect(value.x, value.y, value.w, value.h);
           ctx.fillStyle = 'RGBA(102,102,102,0.2)'
           ctx.fillRect(value.x, value.y, value.w, value.h);
           ctx.stroke();
           // 绘制四个角的圆圈
           ctx.beginPath();
           ctx.strokeStyle = 'red';
           ctx.arc(value.x, value.y, 4, 0, Math.PI * 2)
           ctx.fillStyle = "red";
           ctx.fill();// 画起点实心圆
           ctx.stroke();
           ctx.beginPath();
           ctx.arc(value.x, value.y + value.h, 4, 0, Math.PI * 2);
           ctx.fillStyle = "red";
           ctx.fill();// 画起点纵向实心圆
           ctx.stroke();
           ctx.beginPath();
           ctx.arc(value.x + value.w, value.y + value.h, 4, 0, Math.PI * 2);
           ctx.fillStyle = "red";
           ctx.fill();// 画起点横向实心圆
           ctx.stroke();
           ctx.beginPath();
           ctx.arc(value.x + value.w, value.y, 4, 0, Math.PI * 2);
           ctx.fillStyle = "red";
           ctx.fill();// 画终点实心圆
           ctx.stroke();
           
           // 绘制子矩形
           if (value.options && value.options.length > 0) {
               // //console.info(value.options.length);
               value.options.forEach(option => {
                   ctx.beginPath();
                   ctx.rect(option.x, option.y, option.w, option.h);
                   ctx.stroke();
               });
           }
           
           // 绘制编辑和删除按钮
           const buttonHeight = 24;
           const buttonWidth = 60;

           // 计算按钮位置 - 贴着矩形框底部，按钮之间无间隙
           const buttonsStartX = value.x + value.w - (buttonWidth * 2); // 去掉 buttonMargin
           const buttonsY = value.y + value.h;

           // 绘制删除按钮（左边）
           ctx.fillStyle = "#FF4D4F";
           ctx.fillRect(buttonsStartX, buttonsY, buttonWidth, buttonHeight);

           // 删除按钮文字
           ctx.fillStyle = "white";
           ctx.font = "14px Microsoft YaHei";
           ctx.textAlign = "center";
           ctx.textBaseline = "middle";
           ctx.fillText('删除', buttonsStartX + buttonWidth/2, buttonsY + buttonHeight/2);

           // 绘制编辑按钮（右边）- 直接相邻
           ctx.fillStyle = "#295CFF";
           ctx.fillRect(buttonsStartX + buttonWidth, buttonsY, buttonWidth, buttonHeight);

           // 编辑按钮文字
           ctx.fillStyle = "white";
           ctx.fillText('编辑', buttonsStartX + buttonWidth * 1.5, buttonsY + buttonHeight/2);
           
           // 新增题型显示 - 统一样式
           const typeButtonHeight = 24;
           const padding = 20; // 文字左右padding

           // 设置文字样式
           ctx.fillStyle = 'white';
           ctx.font = '14px Microsoft YaHei';
           ctx.textAlign = 'center';
           ctx.textBaseline = 'middle';

           // 根据templatePointType显示不同内容
           let typeText = '';
           switch(value.templatePointType) {
               case 1: 
                   typeText = '定位点';
                   break;
               case 2:
                   typeText = '文字定位点';
                   break;
               case 3:
                   typeText = '缺考标记';
                   break;
               case 4:
                   typeText = '条形码';
                   break;
               case 5:
                   typeText = '考号填涂';
                   break;
               case 6:
                   typeText = '客观题';
                   break;
               default:
                   typeText = '主观题';
           }

           // 添加题号
           let name = value.includedNumbers != undefined ? value.includedNumbers : '';
           const displayText = typeText + name;

           // 计算文字宽度并添加padding
           const textWidth = ctx.measureText(displayText).width;
           const typeButtonWidth = textWidth + (padding * 2); // 文字宽度加上左右padding

           // 绘制文字背景 - 贴着矩形框顶部
           ctx.fillStyle = '#295CFF';
           ctx.fillRect(value.x, value.y - typeButtonHeight, typeButtonWidth, typeButtonHeight);

           // 绘制文字 - 调整文字垂直位置，确保居中
           ctx.fillStyle = 'white';
           ctx.fillText(displayText, value.x + typeButtonWidth/2, value.y - typeButtonHeight/2);
       }
   })
};
/* 调用接口更新矩形信息 */
function updateRectangle(rectangle,callback) {
   // //console.info('Rectangle updated successfully:',rectangle)
   if(rectangle.templatePointType==5){
       let obj = {
           id:rectangle.templateImageid,
           areaType:rectangle.areaType,
           width:rectangle.w,
           height:rectangle.h,
           x:rectangle.x,
           y:rectangle.y
       }
       post('/template/cuttingregion/boxselection/examnumber',obj)
       .then(res=>{
           if(res.code==200){
               
               const parsedArray = res.data.map(str => {
                 const [x, y, w, h] = str.split(', ').map(Number);
                 return { x, y, w, h };
               });
               const newRectangle = {
                   ...rectangle, // 保留原有属性
                   options:parsedArray   // 添加接口返回的新数据
               }
               //console.info(newRectangle)
               // 调用回调函数，返回新对象
               if (callback && typeof callback === 'function') {
                   callback(newRectangle);
               }
           }else{
               // this.$message.error(res.message); 
           }
       })
   }
   if(rectangle.templatePointType==6){
       let obj = {
           id:rectangle.templateImageid,
           areaType:rectangle.areaType,
           width:rectangle.w,
           height:rectangle.h,
           x:rectangle.x,
           y:rectangle.y,
           isHorizontal:true
       }
       // //console.info(rectangle)
       post('/template/cuttingregion/boxselection/question',obj)
       .then(res=>{
           if(res.code==200){
               let datas = (res.data || [])
                   .flatMap(questionItem => (questionItem.points || []))
                   .map(pad => ({
                       w: pad.width || 0,
                       h: pad.height || 0,
                       x: pad.x || 0,
                       y: pad.y || 0
                   }))
                   const newRectangle = {
                       ...rectangle, // 保留原有属性
                       points:res.data,
                       options:datas   // 添加接口返回的新数据
                   }
                   if (callback && typeof callback === 'function') {
                       callback(newRectangle);
                   }
               //console.info('Rectangle updated successfully:',newRectangle)
           }else{
               // this.$message.error(res.message); 
           }
       })
   }
}